<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>相册类博客项目</title>
    <!--    Bootstrap核心css文件-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
    <!--    字体图标文件-->
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.css">
    <!--    Swipebox灯箱插件-->
    <link rel="stylesheet" href="./swipebox-master/src/css/swipebox.css">
    <!--    自定义css文件-->
    <link rel="stylesheet" href="style.css">
</head>
<body class="container">
<!--导航栏-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a href="index.html" class="navbar-brand"><img
            src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4031816500,2465166800&fm=26&gp=0.jpg"
            width="45" alt=""></a>
    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbarContent">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a href="index.html" class="nav-link">首页</a>
            </li>
            <li class="nav-item">
                <a href="class.html" class="nav-link">分类</a>
            </li>
            <li class="nav-item">
                <a href="blog.html" class="nav-link">博客</a>
            </li>
            <li class="nav-item">
                <a href="contact.html" class="nav-link">联系</a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input type="search" class="form-inline mr-sm-2" placeholder="搜索">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
        </form>
    </div>
</nav>
<!--图片展示区-->
<div class="container">
    <div id="div1">
        <ul id="ul1" class="py-3">
            <li>
                <a href="http://pic1.win4000.com/wallpaper/3/587084e3946ee.jpg" class="swipebox"
                   title="2028年">
                    <img src="http://pic1.win4000.com/wallpaper/3/587084e3946ee.jpg" alt="image"
                         class="img-fluid">
                </a>
            </li>
            <li>
                <a href="http://pic1.win4000.com/wallpaper/c/54783c8bb636f.jpg" class="swipebox"
                   title="2028年">
                    <img src="http://pic1.win4000.com/wallpaper/c/54783c8bb636f.jpg" alt="image"
                         class="img-fluid">
                </a>
            </li>
            <li>
                <a href="http://pic1.win4000.com/wallpaper/a/53d719b21844a.jpg" class="swipebox"
                   title="2028年">
                    <img src="http://pic1.win4000.com/wallpaper/a/53d719b21844a.jpg" alt="image"
                         class="img-fluid">
                </a>
            </li>
            <li>
                <a href="http://img9.51tietu.net/pic/2019-091209/necofec0sfxnecofec0sfx.jpg"
                   class="swipebox" title="2028年">
                    <img src="http://img9.51tietu.net/pic/2019-091209/necofec0sfxnecofec0sfx.jpg"
                         alt="image" class="img-fluid">
                </a>
            </li>

            <li>
                <a href="http://img1.imgtn.bdimg.com/it/u=1432138035,2461939066&fm=26&gp=0.jpg"
                   class="swipebox" title="2028年">
                    <img src="http://img1.imgtn.bdimg.com/it/u=1432138035,2461939066&fm=26&gp=0.jpg"
                         alt="image" class="img-fluid">
                </a>
            </li>
            <li>
                <a href="http://pic1.win4000.com/wallpaper/7/582e739e9fdb0.jpg"
                   class="swipebox" title="2028年">
                    <img src="http://pic1.win4000.com/wallpaper/7/582e739e9fdb0.jpg"
                         alt="image" class="img-fluid">
                </a>
            </li>
            <li>
                <a href="http://pic1.win4000.com/wallpaper/9/541aa7314350b.jpg"
                   class="swipebox" title="2028年">
                    <img src="http://pic1.win4000.com/wallpaper/9/541aa7314350b.jpg"
                         alt="image" class="img-fluid">
                </a>
            </li>
            <li>
                <a href="http://pic1.win4000.com/wallpaper/3/541aaa017fdca.jpg"
                   class="swipebox" title="2028年">
                    <img src="http://pic1.win4000.com/wallpaper/3/541aaa017fdca.jpg"
                         alt="image" class="img-fluid">
                </a>
            </li>
            <li>
                <a href="http://pic1.win4000.com/wallpaper/8/52db3eb024aac.jpg"
                   class="swipebox" title="2028年">
                    <img src="http://pic1.win4000.com/wallpaper/8/52db3eb024aac.jpg"
                         alt="image" class="img-fluid">
                </a>
            </li>
            <li>
                <a href="http://pic1.win4000.com/wallpaper/2018-07-17/5b4ddcd2e2618.jpg?down"
                   class="swipebox" title="2028年">
                    <img src="http://pic1.win4000.com/wallpaper/2018-07-17/5b4ddcd2e2618.jpg?down"
                         alt="image" class="img-fluid">
                </a>
            </li>
            <li>
                <a href="http://pic1.win4000.com/wallpaper/f/52980c674ea98.jpg"
                   class="swipebox" title="2028年">
                    <img src="http://pic1.win4000.com/wallpaper/f/52980c674ea98.jpg"
                         alt="image" class="img-fluid">
                </a>
            </li>
            <li>
                <a href="http://pic1.win4000.com/wallpaper/2/529bf93c4debe.jpg"
                   class="swipebox" title="2028年">
                    <img src="http://pic1.win4000.com/wallpaper/2/529bf93c4debe.jpg"
                         alt="image" class="img-fluid">
                </a>
            </li>
            <li>
                <a href="http://pic1.win4000.com/wallpaper/2018-11-03/5bdd0a810f35a.jpg"
                   class="swipebox" title="2028年">
                    <img src="http://pic1.win4000.com/wallpaper/2018-11-03/5bdd0a810f35a.jpg"
                         alt="image" class="img-fluid">
                </a>
            </li>
            <li>
                <a href="http://img9.51tietu.net/pic/2019-090807/vnc5m2oqibtvnc5m2oqibt.jpg"
                   class="swipebox" title="2028年">
                    <img src="http://img9.51tietu.net/pic/2019-090807/vnc5m2oqibtvnc5m2oqibt.jpg"
                         alt="image" class="img-fluid">
                </a>
            </li>

        </ul>
        <div class="btn-box text-center mb-2">
            <a href="javascript:void(0);" id="btn1" class="mr-5"><i class="fa fa-hand-o-left fa-2x"></i></a>
            <a href="javascript:void(0);" id="btn2" class=""><i class="fa fa-hand-o-right fa-2x"></i></a>
        </div>
    </div>
</div>

<!--引入js文件-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!--Bootstrap核心JavaScript文件-->
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!--swipebox插件-->
<script src="swipebox-master/lib/jquery-2.1.0.min.js"></script>
<script src="swipebox-master/src/js/jquery.swipebox.js"></script>
<script>
    window.onload = function () {
        var oDiv = document.getElementById('div1');
        var oUl = document.getElementById('ul1');
        var speed = 2;
        oUl.innerHTML += oUl.innerHTML;
        var oLi = document.getElementsByTagName('li');
        oUl.style.width = oLi.length * 160 + 'px';
        var oBtn1 = document.getElementById('btn1');
        var oBtn2 = document.getElementById('btn2');

        function move() {
            if (oUl.offsetLeft < -(oUl.offsetWidth / 2)) {
                oUl.style.left = 0;
            }
            if (oUl.offsetLeft > 0) {
                oUl.style.left = -(oUl.offsetWidth / 2) + 'px';
            }
            oUl.style.left = oUl.offsetLeft + speed + 'px';

        }

        oBtn1.addEventListener('click', function () {
            speed = -2;
        }, false);
        oBtn2.addEventListener('click', function () {
            speed = 2;
        }, false);
        var timer = setInterval(move, 30)
    };
    //绑定了.swipebox类
    jQuery(function ($) {
        $('.swipebox').swipebox({
            useCss: true,
            useSVG: true,
            initialIndexOnArray: 0,
            hideCloseButtonOnMobile: false,
            removeBarsOnMobile: true,
            hideBarsDelay: 3000,
            loopAtEnd: false,
        });
    });
</script>
</body>
</html>